<template>
    <div class="items">
        <div class="level"> 第几天的关卡：<input type="text" v-model="level" @change="inputchange"></div>
        <a-table :dataSource="dataSource" :columns="columns" class="table" :pagination="pagination" @change="handleTableChange"/>
    </div>
</template>
<script setup>
import config from '../../config/config.js'
import axios from 'axios';
import { ref, onMounted,computed } from 'vue'
import { useRouter } from 'vue-router';
import api from '../../api/user';
const router = useRouter();
const achieveitem = ref();
const totle=ref();
const level=ref();
onMounted(() => {
    getlist({pageNum:1,pageSize:10});
})
const inputchange=(x)=>{
    getlist({pageNum:1,pageSize:10,level:level.value});
    current.value=1;
}
const getlist=(x)=>{
    api.getlist(x)
.then((res)=>{
    console.log(res);
    totle.value=res.total;
    dataSource.value=res.rows
})
}
const dataSource=ref();
const current=ref(1);
const pageSize=ref(10);
const pagination = computed(() => ({
  total: totle.value,
  current: current.value,
  pageSize: pageSize.value,
}));
const columns = [
  {
    title: '正确率',
    dataIndex: 'accuracy',
    width: '20%',
  },
  {
    title: '题目类型',
    dataIndex: 'type',
    width: '20%',
  },
  {
    title: '第几天的关卡',
    dataIndex: 'level',
  },
  {
    title: '插入时间',
    dataIndex: 'insertTime',
  },
];
const handleTableChange=(x)=>{
    console.log(x);
    current.value=x.current
    getlist({pageNum:x.current,pageSize:10});
}

</script>
<style lang="scss" scoped>
.items {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('@/static/back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    gap: 2rem;
    overflow: hidden;
    overflow-y: auto;
    padding: 3rem;
.table{
    width: 80%;
}
   

}
</style>